/*
 * @Author: kanglang
 * @Date: 2020-07-17 16:24:18
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-04-01 15:37:52
 * @Description: item条目
 */
import React, { Component, } from 'react';
import { StyleSheet, Platform, View, PixelRatio, Text, TouchableHighlight, Image } from 'react-native';
import { px2dp, screenWidth } from '../common/styles';
import PropTypes from 'prop-types';
import { iconRightGray, iconModifyPhone } from '@/images';

class SimpleRowItem extends Component {

    render() {
        if (Platform.OS === 'android') {
            return (
                <TouchableHighlight onPress={this.props.onPress} underlayColor={"rgba(255,255,255,0)"}>
                    {this._renderContent()}
                </TouchableHighlight>
            );
        } else if (Platform.OS === 'ios') {
            return (
                <TouchableHighlight underlayColor={"transparent"}
                    onPress={this.props.onPress}
                >
                    {this._renderContent()}
                </TouchableHighlight>
            );
        }
    }

    _renderContent() {
        const { title, icon, titleRight, rightColor, renderSegment = true, rowItemBackgroundColor,
            lineColor, titleColor, arrowColor, showArrow = true, style,
            leftStyle, rightStyle, TextMiddle } = this.props;
        return (
            <View style={[styles.container, { backgroundColor: rowItemBackgroundColor ? rowItemBackgroundColor : '#fff' }, style]}>
                {
                    icon &&
                    <View style={[styles.leftCell, leftStyle]}>
                        <Image source={icon} style={styles.iconBorder} />
                    </View>
                }
                <View style={[styles.rightCell, rightStyle]}>
                    <View style={styles.cell}>
                        <Text style={[styles.title, { color: titleColor ? titleColor : '#333232' }]}>{title}</Text>
                       {TextMiddle && TextMiddle != '' ?   <View style={styles.middleTextStyle}>
                            <Text style={[styles.title, { color: rightColor ? rightColor : '#999796', left:px2dp(48) }]}>{TextMiddle}</Text>
                            <View style={styles.middleRightStyle}>
                                <Image source={iconModifyPhone} style={{width:px2dp(22),height: px2dp(22)}}/>
                                <Text style={styles.modifyText}>修改</Text>
                            </View>
                        </View>
                        : null}
                        <View style={styles.rightPart}>
                            {titleRight ?
                                <Text style={[styles.title, { color: rightColor ? rightColor : '#999796' }]}>{titleRight}</Text> : null
                            }
                            {showArrow ?
                                <Image source={iconRightGray} style={styles.rightIcon} /> : null
                            }

                        </View>

                    </View>
                    {renderSegment ?
                        <View style={[styles.segmentLine, { backgroundColor: lineColor ? lineColor : '#F0EFEF' }]} />
                        :
                        null
                    }
                </View>
            </View>
        );
    }
}

SimpleRowItem.propTypes = {
    title: PropTypes.string,
    icon: PropTypes.Image,
    onPress: PropTypes.func,
    titleRight: PropTypes.string,
    rightColor: PropTypes.string,
    renderSegment: PropTypes.bool,
    rowItemBackgroundColor: PropTypes.string,
    lineColor: PropTypes.string,
    arrowColor: PropTypes.string,
    showArrow: PropTypes.bool
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: px2dp(50) * 2,
        alignItems: 'center',
        // width:screenWidth
    },
    rightPart: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    title: {
        fontSize: px2dp(14) * 2
    },
    iconBorder: {
        width: px2dp(18) * 2,
        height: px2dp(18) * 2
    },
    leftCell: {
        width: px2dp(26) * 2,
        height: px2dp(26) * 2,
        paddingLeft: px2dp(10) * 2,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    rightCell: {
        flex: 1,
        height: px2dp(50) * 2,
        marginLeft: px2dp(12) * 2,
        marginRight: px2dp(12) * 2,
    },
    cell: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    segmentLine: {
        height: px2dp(1)
    },
    rightIcon:{
        marginLeft: px2dp(8) * 2,
        height: px2dp(32),
        width: px2dp(32)
    },
    middleTextStyle: {
        flex:1,
        justifyContent:'space-between', 
        flexDirection: 'row', 
        alignItems: 'center'
    },
    middleRightStyle:{
        flexDirection: 'row',
        paddingVertical:px2dp(20) ,
        paddingHorizontal:px2dp(30),
        alignItems: 'center', 
        borderRadius:px2dp(8),
        borderColor:'#CDCCCB',
        borderWidth:px2dp(1)
    },
    modifyText: {
        fontSize: px2dp(12 * 2),
        color:'#999796', 
        marginLeft:px2dp(8)
    },
});

export default SimpleRowItem;